<script setup>

import {get} from '../utils/axios-request'
import {reactive, onMounted} from 'vue';
import router from '../router'
import {ElMessageBox} from 'element-plus'

const currentAdmin = reactive({
  username: '',
  nickname: '',
  shortNickname: '',
  role: 0
})

const logout = () => {
  ElMessageBox.alert('确认退出吗？', '退出', {
    confirmButtonText: '确认'
  }).then(() => {
    get('/pdf/admin/logout', () => {
      router.push('/login')
    })
  });
}

onMounted(() => {
  get('/pdf/admin/current', (admin) => {
    currentAdmin.username = admin.username;
    currentAdmin.nickname = admin.nickname;
    currentAdmin.role = admin.role;
    let nicknameLength = currentAdmin.nickname.length;
    currentAdmin.shortNickname = admin.nickname.substring(nicknameLength - 2);
  })
})
</script>

<template>
  <el-menu
      default-active="1"
      class="menu-container"
      mode="horizontal"
      :ellipsis="false"
  >
    <el-sub-menu index="0">
      <template #title>你好，
        <el-avatar> {{ currentAdmin.shortNickname }}</el-avatar>
      </template>
      <el-menu-item index="0-1" @click="logout">退出</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="1">
      <template #title>作品管理</template>
      <el-menu-item index="1-1" @click="router.push('/upload')">上传作品</el-menu-item>
      <el-menu-item index="1-2" @click="router.push('/artwork/list')">作品列表</el-menu-item>
    </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>PDF导出</template>
          <el-menu-item index="2-1" @click="router.push('/add/export')">新建导出</el-menu-item>
          <el-menu-item index="2-2" @click="router.push('/export/list')">导出列表</el-menu-item>
        </el-sub-menu>
  </el-menu>
</template>

<style scoped>
.el-menu--horizontal > .el-sub-menu:nth-child(1) {
  margin-right: auto;
}

.menu-container {
  margin-bottom: 3vh;
}
</style>